(function () {
    // console.log(77)

    //定义一个函数 传入url地址 来取想要的值
    function getQueryString(url) {
        //声明一个变量来存储 url地址 以 ?分割出来的索引为1的值   因为?后面跟的就是传参 先分割再查找想要的值
        let str = url.split('?')[1]
        //判断要是没有传参过来就返回null
        if (!str) return null
        //对参数进行解码
        str = decodeURI(str)
        //再次对str以&分割 并声明newstr来接受 此时是数组形式
        let newstr = str.split('&')
        //声明一个空对象来接收数据 到时候好查询
        let obj = {}
        //对newstr 进行遍历
        newstr.forEach(item => {
            // console.log(item)
            //再将itemstr以=号进行拆分
            let itemstr = item.split('=')
            // console.log(itemstr)
            //此时拆分后的第0 项作为键 第一项作为值 存入对象中  因为键是以变量的形式 所以要用[] 并且不能带引号
            obj[itemstr[0]] = itemstr[1]
        })
        return obj
    }

    let up = document.querySelector('.up')
    let down = document.querySelector('.down')
    let info = document.querySelector('.info')
    let index


    //获取浏览器的url
    let href = location.href
    console.log(href)
    // console.log(getQueryString(href))
    let id = getQueryString(href).categoryId
    console.log(id)

    $.ajax({
        url: `http://chst.vip:1234/api/getproductlist?categoryid=${id}&pageid=1`,
        success(res) {
            console.log(res.totalCount)
            //获得页码
            let num = Math.ceil(res.totalCount / 10)

            if (num == 1) {
                up.disabled = true
                down.disabled = true

            }
            console.log(num)
            let str = ''
            res.result.forEach(item => {
                console.log(item)
                str += `
                <li>
                <a href="javascript:;">
                    <div class="pic">
                        ${item.productImg}
                    </div>
                    <div class="infoText">
                        <div class="infoText_Top">
                        ${item.productName}
                        </div>
                        <div class="prices red">
                        ${item.productPrice}
                        </div>

                        <div class="infoText_Bottom">
                            <span>${item.productQuote}</span>
                            <span class="info_Right">
                                <span class="iconfont icon-xinxi"></span>
                                ${item.productCom}
                            </span>
                        </div>
                    </div>
                </a>
            </li>

                
                `
            })

            $('.info').html(str)
            //循环页码
            let op = ''
            for (let i = 1; i <= num; i++) {
                console.log(i)
                op += `
                
                <option value=${i}>${i}/${num}</option>
                
                `
            }
            $('#page').html(op)
            let page = document.querySelector('#page')
            let option = document.querySelectorAll('option')


            // console.log(option)
            // console.log(page)
            getValue()
            getInfo(index)
            console.log(index)
            down.onclick = () => {
                if (num === 1) {
                    up.disabled = true
                    down.disabled = true

                } else {
                    // console.log(1)
                    up.disabled = false
                    index++
                    option[index - 1].selected = true
                    getInfo(index)
                    if (index == num) {
                        down.disabled = true
                    }
                }
            }

            up.onclick = () => {
                if (num === 1) {
                    up.disabled = true
                    down.disabled = true

                } else {
                    down.disabled = false

                    index--
                    option[index - 1].selected = true
                    getInfo(index)

                    if (index == 1) {
                        up.disabled = true
                    }
                }
            }

            page.onchange = () => {
                getValue()
                getInfo(index)

                if (num === 1) {
                    up.disabled = true
                    down.disabled = true

                } else {

                    if (index == 1) {
                        up.disabled = true
                    } else {
                        up.disabled = false
                    }

                    if (index == num) {
                        down.disabled = true
                    } else {
                        down.disabled = false

                    }


                }

            }

            //定义一个函数 去获得option 的value 
            function getValue() {
                //获取到所有的option然后循环找到被选中的哪一个
                for (let i = 0; i < option.length; i++) {
                    if (option[i].selected) {
                        index = option[i].value
                    }


                }

                return index

            }

            //封装请求数据函数
            function getInfo(index) {
                //发起请求
                $.ajax({
                    url: `http://chst.vip:1234/api/getproductlist?categoryid=${id}&pageid=${index}`,
                    success(res) {
                        let str = ''
                        res.result.forEach(item => {
                            console.log(item)
                            str += `
                            <li>
                            <a href="javascript:;" productId=${item.productListId} pageid=${index}>
                                <div class="pic">
                                    ${item.productImg}
                                </div>
                                <div class="infoText">
                                    <div class="infoText_Top">
                                    ${item.productName}
                                    </div>
                                    <div class="prices red">
                                    ${item.productPrice}
                                    </div>
            
                                    <div class="infoText_Bottom">
                                        <span>${item.productQuote}</span>
                                        <span class="info_Right">
                                            <span class="iconfont icon-xinxi"></span>
                                            ${item.productCom}
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </li>
            
                            
                            `
                        })

                        $('.info').html(str)

                        info.onclick = function (e) {
                            // console.log(e.target.parentNode.parentNode.nodeName)
                            let id1
                            let id2
                            if (e.target.parentNode.nodeName == 'A') {
                                id1 = e.target.parentNode.getAttribute('productId')
                                id2 = e.target.parentNode.getAttribute('pageid')


                            } else {

                                id1 = e.target.parentNode.parentNode.getAttribute('productId')
                                id2 = e.target.parentNode.parentNode.getAttribute('pageid')


                            }

                            console.log(id1)
                            location.href = `../pages/CsParticulars2.html?productId=${id1}&pageid=${id2}&id=${id}`


                        }
                    }
                })

            }




        }
    })



})()